<template>
	<a-modal v-bind="options">
		<vxe-table :data="billTableList" v-bind="billTableOption">
			<vxe-column type="expand" title="账单名称" min-width="300">
				<template #default="{row}">{{ row.billName }}</template>
				<template #content="{row}">
					<vxe-table :data="row.billDetailList" border="inner" size="small" :show-header="false">
						<vxe-column width="60">
							<template #default="{row: detail}">
								<svg-icon :icon-class="`finance-${detail.feeDirection == 1 ? 'in' : 'out'}`" />
								<span v-if="detail.feeDirection === 1" v-color="{color: 'primary'}">&nbsp;收</span>
								<span v-else v-color="{color: 'danger'}">&nbsp;付</span>
							</template>
						</vxe-column>
						<vxe-column>
							<template #default="{row: detail}">
								{{ detail.feeSubjectValue }}:
								<span v-color="{color: 'primary'}">{{ detail.originalMoney.toLocaleString() }}</span>
								元
							</template>
						</vxe-column>
						<vxe-column width="200">
							<template #default>付款日期：{{ formatDate(row.predictTime) }}</template>
						</vxe-column>
						<vxe-column width="280">
							<template #default="{row: detail}">
								费用周期：
								{{ formatDate(detail.beginTime) }}
								至
								{{ formatDate(detail.endTime) }}
							</template>
						</vxe-column>
					</vxe-table>
				</template>
			</vxe-column>
			<vxe-column field="predictTime" title="支付时间" width="120" :formatter="formatterTime" />
			<vxe-column title="账单周期" width="240">
				<template #default="{row}">{{ formatDate(row.beginTime) }} 至 {{ formatDate(row.endTime) }}</template>
			</vxe-column>
			<vxe-column field="totalAmount" title="金额" width="120" align="right">
				<template #default="{row}">{{ row.totalMoney.toLocaleString() }}</template>
			</vxe-column>
			<vxe-column title="操作" width="100" align="center">
				<template #default>
					<a>明细</a>
				</template>
			</vxe-column>
		</vxe-table>
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, reactive, ref, toRef, watch} from 'vue'
	import {VxeTableProps} from 'vxe-table'
	import {getFinanceByBillSplitTopId} from '@/api/bill'
	import {formatDate} from 'yuxin-base/src/utils/date'

	const props = defineProps<{
		// 账单id
		spiltBillTopId?: string | null
		visible: boolean
	}>()
	const emits = defineEmits(['update:visible'])
	const billTableList = ref([])

	const options = reactive({
		title: '关联账单(拆分)',
		width: 1000,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		footer: null,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		}
	})

	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		height: 400,
		loading: true,
		rowConfig: {
			isHover: true,
			isCurrent: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		}
	})

	const formatterTime = ({cellValue}: any): any => {
		return cellValue ? formatDate(cellValue) : ''
	}

	const getLinkBill = (spiltBillTopId: string) => {
		billTableOption.loading = true
		getFinanceByBillSplitTopId(spiltBillTopId)
			.then(({data}) => {
				billTableList.value = data
			})
			.finally(() => (billTableOption.loading = false))
	}

	watch(
		() => [props.visible, props.spiltBillTopId],
		() => {
			billTableList.value = []
			if (props.visible && props.spiltBillTopId) {
				getLinkBill(props.spiltBillTopId)
			}
		}
	)
</script>

<style lang="less" scoped></style>
